/* Class names */
var PLACEHOLDER_ATTRIBUTE = "data-placeholder"; 
var USERINPUT_CLASS = "user_input";

window.common = window.common || {};

common.classStr = function(className)
{
	return '.' + className;
}

common.noOp = function() {}

var ViewAreaType = {
	"MINE": 0,
	"FRIENDS":1,
	"WISHLIST":2
};

// This function will initialize all input objects of class 
function setupInputAreas() 
{
	var userInputClass = classStr(USERINPUT_CLASS);
	
	// Copy the content of the custom tag "data-placeholder" and set it as 'value' so that it shows
	// in the input area, but with special formatting. 
	$(userInputClass).each(function() {
		var placeholder = $(this).attr(PLACEHOLDER_ATTRIBUTE);
				
		if (placeholder) {
			$(this).val(placeholder);
			$(this).css("font-style", "italic");
			$(this).css("color", "gray");	
		}
		
		logC(placeholder);
		
		// Create a 'getValue' function for this object type
		// This will ensure that it either returns an empty string or the value that the user entered
		// and ensure that the placeholder value is not treated as the real value
		this.getValue = function() {
			var text = $(this).val();
			var fs = $(this).css("font-style");
			var name = $(this).attr(PLACEHOLDER_ATTRIBUTE);
		
			if (text === name && fs == "italic") {
				text = "";
			}
			return text;
		};

		this.setValue = function(value) {
			$(this).css("font-style", "normal");
			$(this).css("color", "black");
			$(this).val(value);
		};	
		
		this.resetValue = function() {
			var placeholder = $(this).attr(PLACEHOLDER_ATTRIBUTE);
			
			$(this).val(placeholder);
			$(this).css("font-style", "italic");
			$(this).css("color", "gray");
		};
	});
	
	// Setup a focus callback, which clears the placeholder value (ie if the user has not already modified the value) 
	$(userInputClass).focus(function() {
		var text = $(this).val();
		var fs = $(this).css("font-style");
		var placeholder = $(this).attr(PLACEHOLDER_ATTRIBUTE);
		
		if (placeholder && text === placeholder && fs == "italic") {
			$(this).val("");
			$(this).css("font-style", "normal");
			$(this).css("color", "black");
		}
	});
	
	// Setup a blur handler, which will reset the value back to the placeholder if the user did not enter anything
	$(userInputClass).blur(function() {
		var text = $(this).val();
		var placeholder = $(this).attr(PLACEHOLDER_ATTRIBUTE);
		
		if (placeholder && text == "") {
			$(this).val(placeholder);
			$(this).css("font-style", "italic");
			$(this).css("color", "gray");
		}
	});	
}

$(document).ready(function() {

	setupInputAreas();	
		
});
